<template>
  <div>
    <el-form :model="formData" label-width="100px" :rules="formRules" ref="form">
      <el-form-item label="围栏标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入围栏标题"></el-input>
      </el-form-item>
      <el-row>
        <el-col :sm="12">
          <el-form-item label="启用状态" prop="enabled">
            <el-select v-model="formData.enabled" placeholder="请选择启用状态" style="width: 100%;">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="禁入/禁出" prop="type">
            <el-select v-model="formData.type" placeholder="请选择禁入/禁出" style="width: 100%;">
              <el-option label="禁入" value="1"></el-option>
              <el-option label="禁出" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="container"></div>
    <div class="tableheader">
      <span class="descs">车辆数量（{{selectedCars.length}}个）</span>
      <el-button type="primary" size="small" @click="openDialog">新增</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="selectedCars"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="车牌号" width="120">
        <template slot-scope="scope">{{ scope.row.CarCode }}</template>
      </el-table-column>
      <el-table-column prop="CompanyName" label="所属单位名称" width="120"></el-table-column>
      <el-table-column prop="UseAttrName" label="车辆使用性质" show-overflow-tooltip></el-table-column>
      <el-table-column prop="CarBrandName" label="厂牌型号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="FromCode" label="车架号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="MachineCode" label="发动机号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="CarBrandName" label="经费来源" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="remove(scope.row)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 30px;" :gutter="30">
      <el-col :xs="12" :sm="12" style="text-align: right;">
        <el-button type="primary" @click="save">保存数据</el-button>
      </el-col>
      <el-col :xs="12" :sm="12" style="text-align: left;">
        <el-button @click="reset">重置表单</el-button>
      </el-col>
    </el-row>
    <el-dialog title="车辆信息" ref="tableDialog" :visible.sync="dialogVisible" width="80%">
      <div>
        <el-select v-model="UseAttrName" placeholder="请选择使用性质">
          <el-option v-for="item in UseAttrNames" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="carType" placeholder="请选择车型">
          <el-option v-for="item in carTypes" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="powerType" placeholder="请选择动力类型">
          <el-option v-for="item in powerTypes" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-button type="danger">查询</el-button>
        <el-button type="warning" @click="addNewSelectedCar">确认选择</el-button>
      </div>
      <div class="tableheader">
        <span class="descs">车辆数量（{{allCars.length}}个）</span>
      </div>
      <el-table
        ref="multipleTable"
        :data="allCars"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChangeDialog"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" abel="序号"></el-table-column>
        <el-table-column label="车牌号" width="120">
          <template slot-scope="scope">{{ scope.row.CarCode }}</template>
        </el-table-column>
        <el-table-column prop="CompanyName" label="所属单位名称" width="120"></el-table-column>
        <el-table-column prop="UseAttrName" label="车辆使用性质" show-overflow-tooltip></el-table-column>
        <el-table-column prop="CarBrandName" label="厂牌型号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="FromCode" label="车架号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="MachineCode" label="发动机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="CarBrandName" label="经费来源" show-overflow-tooltip></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" style="text-align: left;">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import amapConfig from "@/utils/amapconfig";
export default {
  mounted() {
    this.selectedCars.push(this.allCars[0]);
    this.loadMap();
  },
  methods: {
    //加载地图
    loadMap() {
      AMapLoader.load(amapConfig)
        .then(AMap => {
          window.AMap = AMap;
          window.AMap.plugin(["AMap.CircleEditor"], () => {
            setTimeout(() => {
              this.initMap();
            }, 100);
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    initMap() {
      let map = new window.AMap.Map("container", {
        center: [123.435429, 41.834045],
        zoom: 14,
        viewMode: "3D"
      });

      let path = [
        [123.435515, 41.833022],
        [123.416117, 41.824324],
        [123.437403, 41.825027]
      ];

      let polygon = new window.AMap.Circle({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        draggable: true,
        zIndex: 50,
        bubble: true,
        center:[123.435515, 41.833022],
      });
      window.polygon=polygon;
      map.add([polygon]);

      // 缩放地图到合适的视野级别
      map.setFitView();
      let polyEditor = new window.AMap.CircleEditor(map, polygon);
      polyEditor.on("add", function(data) {
        console.log(data)
        let polygon = data.target;
      });
      polyEditor.on("end", function(data) {
        console.log(data)
        let polygon = data.target;
      });
      polyEditor.on("move", function(data) {
        console.log(data)
        console.log(data.target.getCenter())
        console.log(data.target.getRadius())
      });
      polyEditor.open();
    },
    openDialog() {
      this.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.selected = val;
    },
    handleSelectionChangeDialog(val) {
      this.dialogSelected = val;
    },
    addNewSelectedCar() {
      let that = this;
      this.dialogSelected.forEach(function(e) {
        that.selectedCars.push(e);
      });
      that.dialogVisible = false;
    },
    //移除选择的车辆
    remove(e) {
      let index = this.selectedCars.findIndex(function(c) {
        return e.Id == c.Id;
      });
      this.selectedCars.splice(index, 1);
    },
    //重置表单
    reset() {
      this.selectedCars.splice(0);
    },
    //提交表单
    save() {
      let $this = this;
      this.$refs.form.validate(function(vaild) {
        if (!vaild) {
          $this.$message({
            message: "请填写完成",
            type: "warning"
          });
        } else {
          console.log("围栏：" + window.polygon.getPath());
        }
        console.log("围栏：" + window.polygon.getPath());
      });
    }
  },
  watch: {
    allChecked() {
      let that = this;
      this.selectedCars.forEach(function(car) {
        car.checked = that.allChecked;
      });
    }
  },
  data() {
    return {
      //表单数据
      formData: {
        title: "",
        enabled: null,
        type: null
      },
      //表单验证
      formRules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        enabled: [
          {
            required: true,
            message: "请选择启用状态",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择禁入/禁出",
            trigger: "blur"
          }
        ]
      },
      UseAttrNames: ["其他用车", "后勤用车"],
      carTypes: ["柴油车", "汽油车"],
      powerTypes: ["新能源", "电混", "汽油", "柴油"],
      UseAttrName: "",
      carType: "",
      powerType: "",
      dialogSelected: [],
      selected: [],
      dialogVisible: false,
      allCars: [
        {
          Id: 4699,
          CarId: 4699,
          CompanyId: 388,
          CompanyName: "培训单位",
          CarAttrId: 0,
          CarAttrName: "",
          CarBrandId: 192,
          CarBrandName: "知豆",
          CarCardColorId: 0,
          CarCardColorName: "",
          CardTypeId: 0,
          CardTypeName: "",
          CarModel: "",
          CarTypeId: 0,
          CarTypeName: "",
          CarClassId: 6,
          CarClassName: "汽油车",
          Remark: "",
          BaoXianDate: "",
          BuyPrice: 15.0,
          CarCode: "辽A45678",
          CarColorId: 0,
          CarColorName: "",
          Discharge: "2",
          DischargeUtil: "",
          DongLiTypeId: 0,
          DongLiTypeName: "",
          FromCode: "qwer",
          PriceFromId: 115,
          PriceFromName: "财政拨款",
          GetTypeId: 0,
          GetTypeName: "调剂",
          GoNum: 0,
          MachineCode: "12345",
          NianShenDate: "2020-04-26T11:31:05.61",
          OBDCode: "",
          PaiFangBiaoZhunId: 0,
          PaiFangBiaoZhunName: "",
          RegDate: "2020-04-05T00:00:00",
          UseAttrId: 0,
          UseAttrName: "",
          ZuoWeiId: 0,
          ZuoWeiName: "",
          XSZFileUrl: "",
          CZZSFileUrl: "",
          ZCKPFileUrl: "",
          YSFPFileUrl: "",
          BSHFileUrl: "",
          CreateDate: "2020-04-26T11:31:05.61"
        }
      ],
      selectedCars: []
    };
  }
};
</script>
<style lang="scss" scoped>
.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  .descs {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
  }
}
#container {
  width: 100%;
  height: 400px;
}
</style>